import 'package:flutter/material.dart'; // fim简便写法
import 'res/listData.dart';

void main() {
  runApp(MyApp());
}

// 基本结构
class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        appBar: AppBar(title: Text('container  text')),
        body: HomeContent(),
      ),
    );
  }
}

class HomeContent extends StatelessWidget {
  // 01 Wrap 流布局，自动换行
  @override
  Widget build(BuildContext context) {
    // return MyButton('第一季');
    // return Row(
    //   children: <Widget>[
    //     MyButton('第一季'),
    //     MyButton('第一季'),
    //     MyButton('第一季'),
    //     MyButton('第一季'),
    //     MyButton('第一季'),
    //     MyButton('第一季'),
    //     MyButton('第一季'),
    //     MyButton('第一季'),
    //   ],
    // );  这样不行

    return Wrap(
      // spacing: 5,
      // runSpacing: 5,
      children: <Widget>[
        MyButton('第一季'),
        MyButton('第一季第一季'),
        MyButton('第一季'),
        MyButton('第一季'),
        MyButton('第一季第一季第一季'),
        MyButton('第一季'),
        MyButton('第一季'),
        MyButton('第一季'),
        MyButton('第一季'),
      ],
    );

    // return Container(
    //   height: 600,
    //   width: 300,
    //   color: Colors.pink,
    //   padding: EdgeInsets.all(10),
    //   child: Wrap(
    //     spacing: 10,
    //     runSpacing: 10,
    //     // direction: Axis.vertical,
    //     // alignment: WrapAlignment.spaceEvenly,
    //     // runAlignment: WrapAlignment.center,
    //     children: <Widget>[
    //       MyButton('第一季'),
    //       MyButton('第一季第一季'),
    //       MyButton('第一季'),
    //       MyButton('第一季'),
    //       MyButton('第一季第一季第一季'),
    //       MyButton('第一季'),
    //       MyButton('第一季'),
    //       MyButton('第一季'),
    //       MyButton('第一季'),
    //     ],
    //   ),
    // );
  }
}

class MyButton extends StatelessWidget {
  final String text; // 点击生成的构造函数，还需改动成下面
  const MyButton(this.text, {Key key}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return RaisedButton(
      child: Text(this.text),
      textColor: Theme.of(context).accentColor,
    );
  }
}
